<template>
  <div class="videoList">
    <div class="videoItem" @click.stop="getShow(item)" v-for="(item,index) in list" :key="index">
      <img :src="item.img" alt="">
      <div class="videoItemInfo">
        <div class="videoItemInfoTitle">{{ item.title }}</div>
        <div class="videoItemInfoStatus">
          <!-- 使用 v-if 进行条件渲染 -->
          <div :class="{'greenDot': item.status === '在线', 'grayDot': item.status !== '在线'}"></div>
          <span>{{ item.status }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import img1 from './assets/img1.jpg'
import img2 from './assets/img2.jpg'
import img3 from './assets/img3.jpg'
import img4 from './assets/img4.jpg'

export default {
  name: "videoList",
  data() {
    return {
      list: [{
        img: img1,
        title: '摄像机1',
        status: '在线'
      }, {
        img: img2,
        title: '摄像机2',
        status: '在线'
      }, {
        img: img3,
        title: '摄像机3',
        status: '在线'
      }, {
        img: img4,
        title: '摄像机4',
        status: '离线'
      },]
    }
  },
  components: {},
  mounted() {

  },
  methods: {
    getShow(e) {
      this.$emit('getPop', e)
    },
  },
}
</script>

<style lang="scss" scoped>
.videoList {
  position: relative;
  width: calc(100% - 20px);
  height: calc(100% - 10px);
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;

  .videoItem {
    width: calc(50% - 5px);
    height: calc(50% - 10px);
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      position: absolute;
      height: 100%;
    }

    .videoItemInfo {
      position: absolute;
      bottom: 0;
      height: 25px;
      width: 100%;
      z-index: 10;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .videoItemInfoTitle {
        margin-left: 3px;
      }

      .videoItemInfoStatus {
        margin-right: 5px;
      }
    }
  }

  .videoItem:nth-child(1) {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .videoItem:nth-child(2) {
    margin-bottom: 10px;
  }

  .videoItem:nth-child(3) {
    margin-bottom: 10px;
    margin-right: 10px;
  }

  .videoItem:nth-child(4) {
    margin-bottom: 10px;
  }
}

/* 添加样式来定义绿色和灰色原点 */
.greenDot {
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px; /* 可根据需要调整间距 */
}

.grayDot {
  width: 10px;
  height: 10px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px; /* 可根据需要调整间距 */
}
</style>
